<template>
  <div class="page-container">
    <page_breadcrumb :getKeyMethod="init_table_model" @change="change_table_model" pageOption />
    <ex_super_table_page v-bind="option" ref="SuperTablePage" @selection-change="e => selection = e"
      @grid-data-change="tableDataChange">
    </ex_super_table_page>

    <el-dialog :close-on-click-modal="false" :title="$tt('label_edit_any', { i18n: true, type: 'label_auto_warehouse_location_spec' })"
      :visible.sync="editVisible" custom-class="dialog_extra">

      <div class="mg_v1"> <el-button type="primary" @click="addSpec">{{ $t('label_add') }}</el-button> </div>
      <el-form :model="editForm" :rules="rules" ref="Form">
        <el-form-item label-width="0" prop="specList">
          <ex_super_table :data="editForm.specList" v-bind="edit_option_table" ref="editForm" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog_footer">
        <el-button @click="editVisible = false">{{ $tt('label_cancel') }}</el-button>
        <el-button type="primary" @click="submitEdit">{{ $tt('label_submit') }}</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>

import superTablePageFunction from '@/mixin/super-table-page-function';
import page_table_model_manage from '@/mixin/page_table_model_manage';
import emitOnFunction from '@/mixin/emit-on-function';
const emitKey = 'wms>base>auto_warehouse_location_spec'
export default {
  title: 'label_auto_warehouse_location_spec',
  mixins: [superTablePageFunction, emitOnFunction(emitKey), page_table_model_manage],
  components: {},
  data() {
    return {
      selection: [],
      editVisible: false,

      editForm: {
        editTempType: null,
        specList: [],
      },

      tableData: [],
      option: {

        actionExtra: [
          {
            label: { _key: 'label_edit_any', i18n: true, type: 'label_auto_warehouse_location_spec' }, attrs: { icon: "el-icon-edit" },
            auth: 'wms_auto_warehouse_location_spec_edit',
            click: () => {
              this.editForm.specList = _.cloneDeep(this.tableData)
              this.editVisible = true
            }
          },
        ],
        table: {
          url: "/wms-api/base/WmsAutoLocationSpecRpc/selectAll.json",
          showIndex: false,
          attrs: { 'cell-class-name': this.cellClassMethod, autoPage: false, 'row-key': 'code', },
          model: this.init_table_model(),
        },
      },
      edit_option_table: {
        height: 400,
        showIndex: false,
        //  'row-key': 'code',
        model: [
          // { key: 'sort', label: 'label_sequence', 'width': 70, },
          {
            key: 'code', label: 'label_spec_code', 'min-width': 120,
            "label-class-name": "label_require_before",
            render: (h, { row, column, index }) => {
              const value = row[column.property]
              const rule = this.rules[column.property]
              return (
                <el-form-item label-width="0"
                  rules={rule}
                  prop={`specList.${index}.${column.property}`} >
                  <el-input value={value} placeholder={column.label} onInput={e => this.$set(row, column.property, e.trim())} />
                </el-form-item>
              )
            }
          },
          {
            key: 'name', label: 'label_spec_name', 'min-width': 120,
            "label-class-name": "label_require_before",
            render: (h, { row, column, index }) => {
              const value = row[column.property]
              const rule = this.rules[column.property]

              return (
                <el-form-item label-width="0" rules={rule} prop={`specList.${index}.${column.property}`}>
                  <el-input value={value} placeholder={column.label} onInput={e => this.$set(row, column.property, e.trim())} />
                </el-form-item>
              )
            }
          },
          {
            key: 'description', label: 'label_description', 'min-width': 120,
            render: (h, { row, column, index }) => {
              const value = row[column.property]
              const rule = this.rules[column.property]

              return (
                <el-form-item label-width="0" rules={rule} prop={`specList.${index}.${column.property}`}>
                  <el-input value={value} placeholder={column.label} onInput={e => this.$set(row, column.property, e.trim())} />
                </el-form-item>
              )
            }
          },
          // {
          //   key: 'areaId', label: 'label_warehouse_area', 'min-width': 120,
          //   "label-class-name": "label_require_before",
          //   render: (h, { row, column, index }) => {
          //     const value = row[column.property]
          //     const rule = this.rules[column.property]

          //     return (
          //       <el-form-item label-width="0" rules={rule} prop={`specList.${index}.${column.property}`}>
          //         <base_area_select value={value} class="w_fill" typeList={['AUTO']}
          //           onInput={e => this.$set(row, column.property, e)}
          //           onChangeItem={e => {
          //             this.$set(row, 'areaName', e.name);
          //             this.$set(row, 'areaCode', e.code)
          //           }} />
          //       </el-form-item>
          //     )
          //   }
          // },
          {
            key: 'length', label: 'label_length', 'min-width': 120,
            "label-class-name": "label_require_before",
            render: (h, { row, column, index }) => {
              const value = row[column.property]
              const rule = this.rules[column.property]

              return (
                <el-form-item label-width="0" rules={rule} prop={`specList.${index}.${column.property}`}>
                  <ex_super_input value={value} placeholder={column.label} 
                    onInput={e => { this.$set(row, column.property, e.trim()); this.volumePush(row) }}
                    append="cm" >
                  </ex_super_input>
                </el-form-item>
              )
            }
          },
          {
            key: 'width', label: 'label_width', 'min-width': 120,
            "label-class-name": "label_require_before",
            render: (h, { row, column, index }) => {
              const value = row[column.property]
              const rule = this.rules[column.property]

              return (
                <el-form-item label-width="0" rules={rule} prop={`specList.${index}.${column.property}`}>
                  <ex_super_input value={value} placeholder={column.label}
                    onInput={e => { this.$set(row, column.property, e.trim()); this.volumePush(row) }}
                    append="cm" >
                  </ex_super_input>
                </el-form-item>
              )
            }
          },
          {
            key: 'height', label: 'label_height', 'min-width': 120,
            "label-class-name": "label_require_before",
            render: (h, { row, column, index }) => {
              const value = row[column.property]
              const rule = this.rules[column.property]

              return (
                <el-form-item label-width="0" rules={rule} prop={`specList.${index}.${column.property}`}>
                  <ex_super_input value={value} placeholder={column.label}
                    onInput={e => { this.$set(row, column.property, e.trim()); this.volumePush(row) }}
                    append="cm" >
                  </ex_super_input>
                </el-form-item>
              )
            }
          },
          {
            key: 'volume', label: 'label_capacity', 'min-width': 120,
            "label-class-name": "label_require_before",
            render: (h, { row, column, index }) => {
              const value = row[column.property]
              const rule = this.rules[column.property]

              return (
                <el-form-item label-width="0" rules={rule} prop={`specList.${index}.${column.property}`}>
                  <ex_super_input value={value} placeholder={column.label}
                    onInput={e => { this.$set(row, column.property, e.trim()); this.volumeChange(); }}
                    append="m³" >
                  </ex_super_input>
                </el-form-item>
              )
            }
          },
          {
            key: 'weight', label: 'label_weight', 'min-width': 120,
            "label-class-name": "label_require_before",
            render: (h, { row, column, index }) => {
              const value = row[column.property]
              const rule = this.rules[column.property]

              return (
                <el-form-item label-width="0" rules={rule} prop={`specList.${index}.${column.property}`}>
                  <ex_super_input value={value} placeholder={column.label} onInput={e => this.$set(row, column.property, e.trim())}
                    append="kg" >
                  </ex_super_input>
                </el-form-item>
              )
            }
          },
          {
            key: 'quantity', label: 'label_warehouse_location_count', 'min-width': 140,
            "label-class-name": "label_require_before",
            render: (h, { row, column, index }) => {
              const value = row[column.property]
              const rule = this.rules[column.property]

              return (
                <el-form-item label-width="0" rules={rule} prop={`specList.${index}.${column.property}`}>
                  <el-input-number class="w_fill" value={value} placeholder={column.label} onInput={e => this.$set(row, column.property, e)}
                    min={1} step-strictly>
                  </el-input-number>
                </el-form-item>
              )
            }
          },
          {
            type: 'operate', width: 140, operate: [
              {
                label: 'label_remove', type: "confirm-button", message: 'text_confirm_sure_delete',
                buttonClass: "button_text_danger", confirmButtonType: 'danger',
                done: (row, i, list) => {
                  list.splice(i, 1)
                },
              },
            ]
          },
        ],
      },
      rules: {
        'code': { required: true, trigger: 'change', validator: (r, v, cb) => this.$ruleStandard({ v, cb, type: '', required: true, })?cb():null, },
        'name': { required: true, trigger: 'change', validator: (r, v, cb) => this.$ruleStandard({ v, cb, type: '', required: true, })?cb():null, },
        // 'areaId': { required: true, trigger: 'change', validator: (r, v, cb) => this.$ruleStandard({ v, cb, type: '', required: true, })?cb():null, },
        'length': { required: true, trigger: 'change', validator: (r, v, cb) => this.$ruleStandard({ v, cb, type: 'dimen', required: true, })?cb():null, },
        'width': { required: true, trigger: 'change', validator: (r, v, cb) => this.$ruleStandard({ v, cb, type: 'dimen', required: true, })?cb():null, },
        'height': { required: true, trigger: 'change', validator: (r, v, cb) => this.$ruleStandard({ v, cb, type: 'dimen', required: true, })?cb():null, },
        'volume': { required: true, trigger: 'change', validator: (r, v, cb) => this.$ruleStandard({ v, cb, type: 'volume', required: true, })?cb():null, },
        'weight': { required: true, trigger: 'change', validator: (r, v, cb) => this.$ruleStandard({ v, cb, type: 'weight', required: true, })?cb():null, },

        'quantity': [{ required: true, type: "number", min: 1, message: this.$tt('tip_can_no_empty'), trigger: 'change' }],
        'specList': [{ required: true, type: "array", message: this.$tt('tip_can_no_empty'), trigger: 'change' }],
      },

    };
  },
  methods: {
    urlDataHandle(e) {
      return e.data.rows ? e.data.rows.sort((a, b) => Number(a.sort) - Number(b.sort)) : []
    },
    option_table_model() {
      return [
        { key: 'sort', label: 'label_sequence', 'width': 70, },

        {
          type: 'expandDesc', 'width': 100,
          expandDesc: {
            ...this.$defaultDescAttrs,
            model: [],
          },
        },
        {
          key: 'code', label: 'label_warehouse_location_spec', 'min-width': 120,
        },
        {
          key: 'description', label: 'label_description', 'min-width': 120, 'show-overflow-tooltip': true,
        },
        // {
        //   key: 'areaId', label: 'label_warehouse_area', 'min-width': 120, 'show-overflow-tooltip': true,
        //   render: (h, { row, column }) => this.$renderText(h, this.$formatNameCode(row.areaName, row.areaCode))
        // },

        { key: 'length', label: 'label_length', 'width': 120, },
        { key: 'width', label: 'label_width', 'width': 120, },
        { key: 'height', label: 'label_height', 'width': 120, },
        { key: 'volume', label: 'label_capacity', 'width': 120, },
        { key: 'weight', label: 'label_weight', 'width': 120, },

        { key: 'quantity', label: 'label_warehouse_location_count', 'width': 120, },
      ]
    },
    addSpec() {
      this.editForm.specList.push({})
    },
    volumePush(row) {
      const v_m = this.$math_mul(row.length, row.width, row.height, 0.000001)
      this.$set(row, 'volume', this.$math_ceil(v_m, 8,false))
      this.volumeChange()
    },
    volumeChange() {
      //this.editForm.specList = this.editForm.specList.sort((a, b) => Number(a.volume) - Number(b.volume))
    },
    cellClassMethod({ row, column, rowIndex, columnIndex }) {

      if (column.property == 'isDisabled') {
        if (row.isDisabled == 'Y') {
          return 'color_danger'
        } else if (row.isDisabled == 'N') {
          return 'color_success'
        }
      }
      return ""
    },
    submitEdit() {
      if (this.$clickFast()) return
      this.$formRulesValidate({
        formRef: this.$refs.Form,
        rules: this.rules,
        success: () => {
          this.$confirm(this.$tt('tip_is_confirm_auto_warehouse_location_spec'), this.$tt("label_tip"), {
            type: 'warning'
          }).then(() => {
            const list = _.sortBy(_.cloneDeep(this.editForm.specList), ['areaCode', 'volume']);
            list.forEach((it, i) => it.sort = i + 1)
            this.$ajax({
              url: '/wms-api/base/WmsAutoLocationSpecRpc/saveOrUpdate.json',
              type: 'json',
              loading: true,
              data: {
                specList: list
              },
              success: (res) => {
                this.$message.success(this.$tt("tip_operate_success"))
                this.editVisible = false
                this.reload()
              },
            })

          }).catch(() => {

          });
        }
      })


    },
    tableDataChange(e) {

      this.tableData = e
    },



  }
};

</script>
<style></style>
